<template>
  <div class="widget_settings_pro">
    <ele-form-section
        labelPosition="left"
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
    >
      <template v-slot:video_url="{ desc, data, field, formData }">
        <div class="editForm">
          <div class="form-item">
            <label>PC端视频</label>
            <upload-file accept="video/mp4,video/quicktime,video/x-msvideo"
                         :fileType="['mp4', 'mov', 'avi']"
                         :isVideo="true"
                         type="file"
                         :fileSize="50"
                         :isShowTip="true"
                         :lazy="true"
                         :responseFn="handleResponse"
                         :action="uploadPath"
                         title="视频"
                         v-model="formData.video"
            ></upload-file>
            <p class="desc">视频大小不能超过50M</p>
          </div>
          <div class="form-item">
            <label>移动端视频</label>
            <upload-file accept="video/mp4,video/quicktime,video/x-msvideo"
                         :fileType="['mp4', 'mov', 'avi']"
                         :isVideo="true"
                         type="file"
                         :fileSize="50"
                         :isShowTip="true"
                         :lazy="true"
                         :responseFn="handleResponse"
                         :action="uploadPath"
                         title="视频"
                         v-model="formData.mobile_video"
            ></upload-file>
            <p class="desc">视频大小不能超过50M</p>
          </div>
        <div class="form-item">
          <label>视频地址 <a class="video__help">粘贴哪个链接?<img src="https://tlkj-shopplus.oss-accelerate.aliyuncs.com/1618210995927e70p2v.gif" class="video__gif"></a></label>
<!--          <el-input type="text" v-model="formData.video" placeholder="粘贴Youtube视频链接"></el-input>-->
        </div>
        </div>
      </template>
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>
  </div>
</template>

<script>
import {debounce, deepClone} from '@/utils/utils';
import uploadFile from '_c/Upload/uploadFile.vue';
const predefineColors = [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)'
];
export default {
    name: 'VideoForm',
    components: {uploadFile},
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        value: {
            handler (newVal, oldVal) {
                this.formData = JSON.parse(newVal.styleJson);
            },
            immediate: false,
            deep: true
        },
        formData: {
            handler (newVal, oldVal) {
                this.pageCount++;
                if (this.pageCount !== 1) {
                    this.setData();
                }
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        var checkAddress = (rule, value, callback) => {
            setTimeout(() => {
                if (value && !/www\.youtube\.com\S*$/.test(value)) {
                    callback(new Error('链接输入错误，请粘贴 YouTube 视频链接'));
                }
                callback();
            }, 200);
        };
        return {
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            pageCount: 1,
            activeNames: [],
            sections: [
                {
                    title: '文本',
                    formDesc: {
                        'video_title': {
                            type: 'input',
                            label: '标题'
                        }
                    }
                },
                {
                    title: '视频链接',
                    formDesc: {
                        'video_url': {
                            type: 'input',
                            label: ''
                        },
                        'video': {
                            type: 'input',
                            label: '',
                            rules: { message: '链接输入错误，请粘贴 YouTube 视频链接', trigger: 'change' },
                            attrs: {
                                placeholder: '粘贴Youtube视频链接'
                            }
                        }
                    }
                },
                {
                    title: '间距留白',
                    formDesc: {
                        'module_layout': {
                            type: 'ele-spacing'
                        }
                    }
                }
            ]
        };
    },
    methods: {
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (data) {
            console.log(data);
            return Promise.resolve();
        },
        handleRemove (index, record) {
            this.formData.blocks.splice(index, 1);
        },
        setData: debounce(function () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
            // if (!this.formData.video || /www\.youtube\.com\/\S*$/.test(this.formData.video)) {
            //     this.$store.commit('SET_PROJECT_DATA', data);
            // }
        }, 600),
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        }
    },
    mounted () {
        if (!('module_layout' in this.formData)) {
            this.$set(this.formData, 'module_layout', {
                left: 0,
                top: 0,
                right: 0,
                bottom: 0
            });
        }
    }
};
</script>

<style scoped lang="scss">
.form-item-inline{
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  color: #606266;
  height: 32px;
  margin-bottom: 10px;
}
.editForm{
  .form-item{
    margin-top: 10px;
    width: 260px;
    label {
      height: 32px;
      line-height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .video__gif {
        display: none;
        position: absolute;
        width: 260px;
        z-index: 1;
        border: 1px dashed;
        top: 36px;
        right:-10px;
      }
      .video__help {
        color: #1f7df8;
        font-size: 12px;
        cursor: pointer;
        &:hover{
          .video__gif{
            display: block;
          }
        }
      }
    }
  }
  ::v-deep .el-collapse-item__content{
    border: 1px solid #d8deec;
    border-top:0;
    padding-left: 10px;
  }
}
.addBtn{
  width: 100%;
}
</style>
